<template>
    <div flex h-full>
        <div m-auto bg-gray-100 flex flex-col items-center border border-gray-300 p-30 rounded-10>
            <h5 text-24 font-normal color="#6a6a6a">
                {{ title }}
            </h5>

            <n-card title="绑定邮箱" mt-20>
                <n-space>
                    <n-input placeholder="邮箱" v-model:value="email"></n-input>
                    <n-button @click="sendCode" :disabled="codeSent">
                        <n-countdown ref="countDown" v-if="codeSent" :render="renderCountdown" :duration="2000"
                            :active="codeSent" :on-finish="countDownFinished" />

                        <span v-if="!codeSent">验证</span>
                    </n-button>
                </n-space>

                <div v-if="bindVisible">
                    <div mt-10 mb-10>
                        <n-input placeholder="验证码" v-model:value="emailCode"></n-input>
                    </div>

                    <div>
                        <n-button type="primary" @click="bindEmailWithCode">绑定邮箱</n-button>
                    </div>
                </div>
            </n-card>
        </div>

        <Mask :visible="maskVisible" />
    </div>
</template>
  
<script setup>
import { useAccountStore } from '@/stores/account'
import { setToken, isEmail, isEmpty } from '@/utils'
import { getAccountInfo, sendEmailCode, bindEmail } from '@/apis/auth';

const title = import.meta.env.VITE_APP_TITLE
const accountStore = useAccountStore();

const route = useRoute();
const token = route.query.token;
const email = ref("a.b@c.com");
const emailCode = ref("");
const codeSent = ref(false);
const countDown = ref();
const bindVisible = ref(false);
const maskVisible = ref(false);

setToken(token);

function renderCountdown({
    hours,
    minutes,
    seconds
}) {
    const s = hours * 3600 + minutes * 60 + seconds;
    return `${s}`;
}

function countDownFinished() {
    codeSent.value = false;
    countDown.value.reset();
}

async function bindEmailWithCode() {
    maskVisible.value = true;

    try {
        if (isEmpty(emailCode.value)) {
            $message.error("验证码不能为空");
        } else {
            const result = await bindEmail(emailCode.value);

            if (result.code === 0) {
                // 绑定成功
                $message.success("绑定成功");
                reload();
            } else {
                $message.error(result.message);
            }
        }

        maskVisible.value = false;
    } catch (error) {
        maskVisible.value = false;
    }
}

async function sendCode() {
    if (isEmail(email.value)) {
        try {
            await sendEmailCode(email.value);
            $message.success("验证码已发送");
            codeSent.value = true;
            bindVisible.value = true;
        } catch (error) {
        }

    } else {
        $message.error("邮箱格式错误");
    }
}

async function loadAccountInfo() {
    const data = await accountStore.getAccountInfo();

    console.log("info: ", accountStore.info);

    if (data.id) {
        // 用户已注册
        reload();
    }
}

function reload() {
    window.opener.location.reload();
    window.close();
}

loadAccountInfo();
</script>